<!DOCTYPE html>
<html>
<head>
    <title>权限组管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../resources/lib/bui/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../../resources/lib/bui/css/dpl-min.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="demo-content">
    <div class="row">
        <div class="span16">
            <div id="grid">
            </div>
        </div>
    </div>
    <script src="../../resources/lib/bui/js/jquery-1.8.1.min.js"></script>
    <script src="../../resources/lib/bui/js/bui-min.js"></script>
    <!-- script start-->
    <script type="text/javascript">
        BUI.use(['bui/grid','bui/data'],function(Grid,Data){
            var Grid = Grid,
                    Store = Data.Store,
                    enumObj = {"1" : "禁用","2" : "查看","3" : "编辑"},
                    columns = [
                        {title : '角色名称',dataIndex :'a',width:150,editor : {xtype : 'text'}}, //editor中的定义等用于 BUI.Form.Field.Text的定义
                        {title : '系统设置',dataIndex : 'b', editor : {xtype :'select',items : enumObj},renderer : Grid.Format.enumRenderer(enumObj)},
                        {title : '节假日设置',dataIndex : 'c', editor : {xtype :'select',items : enumObj},renderer : Grid.Format.enumRenderer(enumObj)},
                        {title : '时间域设置',dataIndex : 'd', editor : {xtype :'select',items : enumObj},renderer : Grid.Format.enumRenderer(enumObj)},
                        {title : '人组设置',dataIndex : 'e', editor : {xtype :'select',items : enumObj},renderer : Grid.Format.enumRenderer(enumObj)},
                        {title : '门组设置',dataIndex : 'f', editor : {xtype :'select',items : enumObj},renderer : Grid.Format.enumRenderer(enumObj)},
                        {title : '规则设置',dataIndex : 'g', editor : {xtype :'select',items : enumObj},renderer : Grid.Format.enumRenderer(enumObj)},
                        {title : '权限设置',dataIndex : 'h', editor : {xtype :'select',items : enumObj},renderer : Grid.Format.enumRenderer(enumObj)},
                        {title : '区域设置',dataIndex : 'i', editor : {xtype :'select',items : enumObj},renderer : Grid.Format.enumRenderer(enumObj)},
                        {title : '操作',dataIndex:'e',renderer : function(){
                            return '<span class="grid-command btn-edit">编辑</span>'
                        }}
                    ],
                    data = [{a:'超级管理员',b:'3',c:'3',d:'3',e:'3',f:'3',g:'3',h:'3',i:'3'},
                        {a:'系统管理员',b:'3',c:'2',d:'2',e:'2',f:'2',g:'2',h:'2',i:'2'},
                        {a:'制卡专员',b:'1',c:'1',d:'1',e:'3',f:'1',g:'1',h:'1',i:'1'},
                        {a:'保安人员',b:'1',c:'1',d:'1',e:'1',f:'1',g:'1',h:'1',i:'1'},
                        {a:'巡更人员',b:'1',c:'1',d:'1',e:'1',f:'1',g:'1',h:'1',i:'2'}];

            var editing = new Grid.Plugins.RowEditing({
                        triggerCls : 'btn-edit',
                        triggerSelected : false
                    }),
                    store = new Store({
                        data : data,
                        autoLoad:true
                    }),
                    grid = new Grid.Grid({
                        render:'#grid',
                        columns : columns,
                        width : 800,
                        forceFit : true,
                        tbar:{ //添加、删除
                            items : [{
                                btnCls : 'button button-small',
                                text : '<i class="icon-plus"></i>添加',
                                listeners : {
                                    'click' : addFunction
                                }
                            },
                                {
                                    btnCls : 'button button-small',
                                    text : '<i class="icon-remove"></i>删除',
                                    listeners : {
                                        'click' : delFunction
                                    }
                                }]
                        },
                        plugins : [editing,Grid.Plugins.CheckSelection],
                        store : store
                    });

            grid.render();

//添加记录
            function addFunction(){
                var newData = {b : 0};
                store.addAt(newData,0);
                editing.edit(newData,'a'); //添加记录后，直接编辑
            }
//删除选中的记录
            function delFunction(){
                var selections = grid.getSelection();
                store.remove(selections);
            }
        });
    </script>
    <!-- script end -->
</div>
</body>
</html>